<template>
  <div>
    <div class="account-settings-info-main">
      <div class="account-settings-info-left">
        <a-menu
          v-model:selectedKeys="selectedKeys"
          v-model:openKeys="openKeys"
          mode="inline"
          :style="{ border: '0', width: 'auto' }"
          @openChange="onOpenChange"
        >
          <!-- <a-menu-item key="/persional/Setting/BaseSetting">
            <router-link :to="{ name: 'BaseSettings' }"> 基本设置 </router-link>
          </a-menu-item> -->
          <a-menu-item key="/persional/Setting/Security">
            <router-link :to="{ name: 'SecuritySettings' }"> 安全设置 </router-link>
          </a-menu-item>
          <a-menu-item key="/persional/Setting/Binding">
            <router-link :to="{ name: 'BindingSettings' }"> 账户绑定 </router-link>
          </a-menu-item>
          <!-- <a-menu-item key="/persional/settings/custom">
            <router-link :to="{ name: 'CustomSettings' }"> 个性化 </router-link>
          </a-menu-item>
          <a-menu-item key="/persional/settings/notification">
            <router-link :to="{ name: 'NotificationSettings' }"> 新消息通知 </router-link>
          </a-menu-item> -->
        </a-menu>
      </div>
      <div class="account-settings-info-right">
        <div class="account-settings-info-title">
          <span>{{ menu_title }}</span>
        </div>
        <router-view />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref, watch } from 'vue'
import { Row, Col } from 'ant-design-vue'
import { UploadOutlined, PaperClipOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'PersionalSetting',
  components: {
    UploadOutlined,
    PaperClipOutlined,
    [Row.name]: Row,
    [Col.name]: Col
  },
  setup() {
    const FormRef = ref()
    const router = useRouter()
    const state = reactive<any>({
      ConfirmLoading: false,
      selectedKeys: [],
      openKeys: [],
      menu_title: router.currentRoute.value?.meta.title,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    })
    const FormState = reactive({
      key_id: '',
      key_secret: '',
      region: '',
      sign: ''
    })
    const FormRule = {
      key_id: [{ required: true, message: '请填写密钥ID', trigger: ['blur', 'change'] }],
      key_secret: [{ required: true, message: '请填写访问密钥', trigger: ['blur', 'change'] }],
      sign: [{ required: true, message: '请填写短信签名', trigger: ['blur', 'change'] }],
      region: [{ required: true, message: '请选择地域', trigger: ['blur', 'change'] }]
    }
    watch(
      () => router.currentRoute.value?.meta.title,
      () => {
        state.menu_title = router.currentRoute.value.meta.title
      }
    )
    onMounted(() => {
      state.selectedKeys = [router.currentRoute.value?.path]
    })
    const onOpenChange = (openKeys) => {
      state.openKeys = openKeys
      state.menu_title = router.currentRoute.value?.meta.title
    }
    return {
      ...toRefs(state),
      FormRef,
      onOpenChange,
      FormState,
      FormRule
    }
  }
})
</script>

<style lang="scss" scoped>
.account-settings-info-main {
  width: 100%;
  display: flex;
  height: 100%;
  overflow: auto;

  &.mobile {
    display: block;

    .account-settings-info-left {
      border-right: unset;
      border-bottom: 1px solid #e8e8e8;
      width: 100%;
      height: 50px;
      overflow-x: auto;
      overflow-y: scroll;
    }
    .account-settings-info-right {
      padding: 20px 40px;
    }
  }

  .account-settings-info-left {
    border-right: 1px solid #e8e8e8;
    width: 224px;
  }

  .account-settings-info-right {
    flex: 1 1;
    padding: 8px 40px;

    .account-settings-info-title {
      color: rgba(0, 0, 0, 0.85);
      font-size: 20px;
      font-weight: 500;
      line-height: 28px;
      margin-bottom: 20px;
    }
    .account-settings-info-view {
      padding-top: 12px;
    }
  }
}
</style>
